<template>
  <div class="manage">
    <el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" :visible.sync="isShow">
      <common-form :formLabel="opertateFormLabel" :form="operateForm" :inline="true" ref="form">
      </common-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm(operateForm)">确定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="addUser">新增</el-button>
      <common-form :formLabel="formLabel" :form="searchFrom" :inline="true" ref="form">
        <el-button type="primary" @click="getList()">搜索</el-button>
      </common-form>
    </div>
    <common-table @changePage="getList()" @edit="editUser" @del="delUser" :config="config" :tableData="tableData"
                  :tableLabel="tableLabel" @changeRole="changeRole" :options="options"></common-table>
  </div>
</template>

<script>
import CommonForm from '@/views/CommonForm.vue'
import CommonTable from '@/views/CommonTable.vue'
import {getUserName, saveUserName, updateUser, delUserRomove, UserAndRole} from '@/api/user'
import {getRoleListName} from '@/api/role'

export default {
  name: 'userName',
  components: {
    CommonForm,
    CommonTable
  },
  data() {
    return {
      operateType: 'add',
      isShow: false,
      opertateFormLabel: [{
        model: 'username',
        label: '员工姓名',
        type: 'input'
      }, {
        model: 'age',
        label: '年龄',
        type: 'input'
      }, {
        model: 'sex',
        label: '性别',
        type: 'select',
        opts: [
          {
            label: '男',
            value: 1
          }, {
            label: '女',
            value: 0
          }
        ]
      }, {
        model: 'phone',
        label: '电话',
        type: 'input'
      }],
      operateForm: {
        username: '',
        age: '',
        phone: '',
        sex: '',
        role: ''
      },
      formLabel: [{
        model: 'keyword',
        label: '',
        type: 'input'
      }],
      searchFrom: {
        keyword: ''
      },
      config: {
        total: 1,
        page: 1,
        pageSize: 6,
      },
      tableData: [],
      tableLabel: [
        {
          prop: "username",
          label: "员工名称",
          width: 220
        }, {
          prop: "age",
          label: "年龄",
          width: 220
        }, {
          prop: "sex",
          label: "性别",
          width: 220
        }, {
          prop: 'phone',
          label: '电话',
          width: 220
        }
      ],
      options: []
    }
  },
  methods: {
    confirm(value) {
      if (this.operateType === 'edit') {
        value.sex = "女" ? "0" : "1"
        updateUser(value).then(res => {
          if (res.status==200) {
            this.isShow = false
            this.$message.success("修改成功")
            this.getList()
          } else {
            this.isShow = false
            this.$message.error(res.msg || '操作失败')
          }
        }).catch(err => {
          this.$message.error('请求出错了：' + err)
          this.isShow = false
        })
      } else {
        console.log(value);
        saveUserName(value).then(res => {
          if (res.data.code === 1) {
            this.isShow = false
            this.$message.success("增加成功")
            this.getList()
          } else {
            this.$message.error(res.data.msg || '操作失败')
            this.isShow = false
          }
        }).catch(err => {
          this.$message.error('请求出错了：' + err)
          this.isShow = false
        })

      }
    },
    addUser() {
      this.isShow = true
      this.operateType = 'add'
      this.operateForm = {
        username: '',
        age: '',
        phone: '',
        sex: ''
      }
    },
    editUser(row) {
      this.operateType = 'edit'
      this.isShow = true
      this.operateForm = row
    },
    delUser(row) {
      this.$confirm("此操作将永久删除该用户，是否继续?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log(row.id);
        delUserRomove({'id': row.id}).then(res => {
          if (res.status === 200) {
            this.$message.success('删除成功！')
            this.getList()
          } else {
            this.$message.error(res.data.msg || '操作失败')
          }
        })
      })
    },
    async getList() {
      const params = {
        page: this.config.page,
        pageSize: this.config.pageSize,
        name: this.searchFrom.keyword ? this.searchFrom.keyword : undefined
      }
      await getUserName(params).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.tableData = res.data.data.pageDto.records.map(item => {
            item.sex = item.sex === "0" ? "女" : "男"
            return item
          })
          this.config.total = res.data.data.pageDto.total
        } else {
          this.$message.error(res.data.msg || '操作失败')
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
      })
      getRoleListName().then(res => {
        console.log(res)
        if (res.status === 200) {
          console.log(res);
          this.options = res.data.data.list
        } else {
          this.$message.error(res.msg || '操作失败')
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)

      })
    },
    changeRole(row) {
      UserAndRole(row).then(res => {
        if (res.status === 200) {
          this.$message.success("操作成功")
        } else {
          this.$message.error(res.msg || '操作失败')
        }
      }).catch(err => {
        this.$message.error('请求出错了：' + err)
      })
    },
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
